<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>记事本</title>
    <script src="./js/vue.js"></script>
    <style>
        #app {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        #app img {
            width: 200px;
            height: 200px;
            object-fit: cover;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            margin: 10px;
            transition: transform 0.3s ease;
        }

        #app img:hover {
            transform: scale(1.1);
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="upImg">上一页</button>
    <img :src="img[0].img">
    <button @click="downImg">下一页</button>
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            img: [
                {img: 'https://www.keaitupian.cn/cjpic/frombd/2/253/1676065055/2828606542.jpg'},
                {img: 'https://www.keaitupian.cn/cjpic/frombd/0/253/3655621348/1444233956.jpg'},
                {img: 'https://www.keaitupian.cn/cjpic/frombd/0/253/1130286113/2534502267.jpg'},
                {img: 'https://ts1.cn.mm.bing.net/th/id/R-C.bcc06d6c965fd1617debf0d1bddb4771?rik=xBsBNh4GaByc5g&riu=http%3a%2f%2fimg.touxiangkong.com%2fzb_users%2fupload%2f2022%2f11%2f202211131668352274260190.jpg&ehk=VNVzLMq5hb0F2Nz2TdZ4qUXg8iJjDsyYCBFRREShFp0%3d&risl=&pid=ImgRaw&r=0'},
                {img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.yp-D-KHI3e2nN4eMBJcEVAAAAA?rs=1&pid=ImgDetMain'},
            ]
        },
        methods: {
            upImg() {
                // this.img.pop() 从数组的末尾移除并返回最后一个元素。
                // this.img.unshift(...) 将这个被移除的元素添加到数组的开头
                this.img.unshift(this.img.pop())
            },
            downImg() {
                // this.img.shift() 从数组的开头移除并返回第一个元素。
                // this.img.push(...) 将这个被移除的元素添加到数组的末尾。
                this.img.push(this.img.shift())
            }
        }
    })
</script>